<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
			body{
				background-color: #f5f5f5;
			}
			#app{
				background-color: #fff;
				width: 400px;
				/* border: 1px solid #999; */
				margin: 10px auto;
				padding: 20px;
				box-shadow: 0 0 10px 1px #999;
			}
			label{
				font-size: 20px;
			}
			input{
				height: 35px;
				margin: 10px;
				border: 2px solid #999;
				border-radius: 3px;
				padding: 0 10px;
				outline: none;
				font-size: 16px;
			}
			span{
				color: red;
				font-weight: 600;
			}
			p{
				font-size: 18px;
				line-height: 45px;
				color: #666;
			}
			i{
				color: blue;
			}
	</style>
	<body>
			<div id='app'>
				<h3 align='center'>黄金价格计算器</h3>
				<label>买入单价：</label>
				<input v-model.number="in_price" type="number"> 
				<span>元/克</span> <br>
				<label>卖出单价：</label>
				<input v-model.number="out_price" type="number"> 
				<span>元/克</span> <br>
				<label>手续费率：</label>
				<input v-model.number="rate"  type="number"> 
				<span>%</span> <br>
				<label>购买数量：</label>
				<input v-model.number="num"  type="number"> 
				<span>克</span> <br>
				<hr>
				<p>
					成本价： <i>{{cost}}</i> <br>
					卖出价：<i>{{sell}}</i><br>
					手续费：<i>{{fee}}</i><br>
					赎回获得：<i>{{total}}</i><br>
					净收入：<i>{{income}}</i>
				</p>
				<hr>
				<h1>监听属性</h1>
				人民币:<input v-model.number="rmb" type="number"> <br>
				美元: {{dollar}}<br>
				欧元: {{euro}}<br>
				日元: {{yen}}<br>
				韩元: {{kwo}}
			</div>
			<script>
				Vue.createApp({
					data(){
						return{
							in_price:'',
							out_price:'',
							rate:0.3,
							num:'',
							rmb:'',
							dollar:'',
							euro:'',
							yen:'',
							kwo:''
						}
					},
					watch:{//监听属性
						rmb(newValue,oldValue){//新  旧
							this.dollar=(newValue*0.1383).toFixed(2)//美元
							this.euro=(newValue*0.1265).toFixed(2)
							this.yen=(newValue*20.7017).toFixed(2)
							this.kwo=(newValue*200.9).toFixed(2)
							
						}
					},
					computed:{//计算属性
						cost(){//成本价
							return(this.in_price*this.num).toFixed(2)
						},
						sell(){//卖出价
							return(this.out_price*this.num).toFixed(2)
						},
						fee(){//手续费
							return(this.sell*this.rate*0.01).toFixed(2)
						},
						total(){//赎回获得
							return(this.sell-this.fee).toFixed(2)
						},
						income(){//净收入
							return(this.total-this.cost).toFixed(2)
						}
					}
				}).mount('#app')
			</script>
	</body>
</html>